<template>
    <el-container direction="vertical" style="height: 100%">
        <el-header style="padding: 0px; padding-left: 10px; border-radius: 4px">
            <Header v-on:menu-fold="menuFold"/>
        </el-header>
        <el-container direction="horizontal">
            <el-aside :width="asideWidth" style="top: 0; height: 100%">
                <Menu v-bind:isCollapse="isCollapse"/>
            </el-aside>
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>

<script>
  import Header from '../components/Header'
  import Menu from '../components/Menu'

  export default {
    name: "Home",
    data() {
      return {
        isCollapse: false,
        asideWidth: '210px'
      }
    },
    components: {
      Header,
      Menu
    },
    methods: {
      menuFold(val) {
        let vue = this
        vue.isCollapse = val
        if (val) {
          vue.asideWidth = 'auto'
        } else {
          vue.asideWidth = '210px'
        }
      }
    }
  }
</script>

<style>
    .el-footer {
        background-color: #B3C0D1;
        color: #333;
        /*text-align: center;*/
        /*line-height: 60px;*/
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        /*text-align: center;*/
        /*line-height: 200px;*/
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        /*text-align: center;*/
        /*line-height: 160px;*/
    }

    /*body > .el-container {*/
    /*margin-bottom: 40px;*/
    /*}*/

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>
